<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      v-loading="formLoading"
      label-width="50px"
    >
      <el-form-item label-width="80px" label="就诊人" prop="patientName">
        <el-input disabled v-model="formData.patientName" placeholder="请输入就诊人姓名"/>
      </el-form-item>
      <el-divider><h3>PSA</h3></el-divider>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <el-form-item label="1M" prop="psa1">
            <el-input v-model="formData.psa1" placeholder="PSA1M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3M" prop="psa3">
            <el-input v-model="formData.psa3" placeholder="PSA3M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="6M" prop="psa6">
            <el-input v-model="formData.psa6" placeholder="PSA6M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="12M" prop="psa12">
            <el-input v-model="formData.psa12" placeholder="PSA12M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="18M" prop="psa18">
            <el-input v-model="formData.psa18" placeholder="PSA18M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="24M" prop="psa24">
            <el-input v-model="formData.psa24" placeholder="PSA24M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="30M" prop="psa30">
            <el-input v-model="formData.psa30" placeholder="PSA30M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="36M" prop="psa36">
            <el-input v-model="formData.psa36" placeholder="PSA36M"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider><h3>MRI</h3></el-divider>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <el-form-item label="1M" prop="mri1">
            <el-input v-model="formData.mri1" placeholder="MRI1M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3M" prop="mri3">
            <el-input v-model="formData.mri3" placeholder="MRI3M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="6M" prop="mri6">
            <el-input v-model="formData.mri6" placeholder="MRI6M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="12M" prop="mri12">
            <el-input v-model="formData.mri12" placeholder="MRI12M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="18M" prop="mri18">
            <el-input v-model="formData.mri18" placeholder="MRI18M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="24M" prop="mri24">
            <el-input v-model="formData.mri24" placeholder="MRI24M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="30M" prop="mri30">
            <el-input v-model="formData.mri30" placeholder="MRI30M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="36M" prop="mri36">
            <el-input v-model="formData.mri36" placeholder="MRI36M"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider><h3>穿刺</h3></el-divider>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <el-form-item label="1M" prop="cx1">
            <el-input v-model="formData.cx1" placeholder="穿刺1M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3M" prop="cx3">
            <el-input v-model="formData.cx3" placeholder="穿刺3M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="6M" prop="cx6">
            <el-input v-model="formData.cx6" placeholder="穿刺6M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="12M" prop="cx12">
            <el-input v-model="formData.cx12" placeholder="穿刺12M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="18M" prop="cx18">
            <el-input v-model="formData.cx18" placeholder="穿刺18M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="24M" prop="cx24">
            <el-input v-model="formData.cx24" placeholder="穿刺24M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="30M" prop="cx30">
            <el-input v-model="formData.cx30" placeholder="穿刺30M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="36M" prop="cx36">
            <el-input v-model="formData.cx36" placeholder="穿刺36M"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider><h3>尿控</h3></el-divider>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <el-form-item label="1M" prop="nk1">
            <el-input v-model="formData.nk1" placeholder="尿控1M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3M" prop="nk3">
            <el-input v-model="formData.nk3" placeholder="尿控3M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="6M" prop="nk6">
            <el-input v-model="formData.nk6" placeholder="尿控6M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="12M" prop="nk12">
            <el-input v-model="formData.nk12" placeholder="尿控12M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="18M" prop="nk18">
            <el-input v-model="formData.nk18" placeholder="尿控18M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="24M" prop="nk24">
            <el-input v-model="formData.nk24" placeholder="尿控24M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="30M" prop="nk30">
            <el-input v-model="formData.nk30" placeholder="尿控30M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="36M" prop="nk36">
            <el-input v-model="formData.nk36" placeholder="尿控36M"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider><h3>性功能</h3></el-divider>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <el-form-item label="1M" prop="xgn1">
            <el-input v-model="formData.xgn1" placeholder="性功能1M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3M" prop="xgn3">
            <el-input v-model="formData.xgn3" placeholder="性功能3M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="6M" prop="xgn6">
            <el-input v-model="formData.xgn6" placeholder="性功能6M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="12M" prop="xgn12">
            <el-input v-model="formData.xgn12" placeholder="性功能12M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="18M" prop="xgn18">
            <el-input v-model="formData.xgn18" placeholder="性功能18M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="24M" prop="xgn24">
            <el-input v-model="formData.xgn24" placeholder="性功能24M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="30M" prop="xgn30">
            <el-input v-model="formData.xgn30" placeholder="性功能30M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="36M" prop="xgn36">
            <el-input v-model="formData.xgn36" placeholder="性功能36M"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider><h3>出血</h3></el-divider>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <el-form-item label="1M" prop="bleeding1">
            <el-input v-model="formData.bleeding1" placeholder="出血1M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3M" prop="bleeding3">
            <el-input v-model="formData.bleeding3" placeholder="出血3M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="6M" prop="bleeding6">
            <el-input v-model="formData.bleeding6" placeholder="出血6M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="12M" prop="bleeding12">
            <el-input v-model="formData.bleeding12" placeholder="出血12M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="18M" prop="bleeding18">
            <el-input v-model="formData.bleeding18" placeholder="出血18M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="24M" prop="bleeding24">
            <el-input v-model="formData.bleeding24" placeholder="出血24M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="30M" prop="bleeding30">
            <el-input v-model="formData.bleeding30" placeholder="出血30M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="36M" prop="bleeding36">
            <el-input v-model="formData.bleeding36" placeholder="出血36M"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider><h3>疼痛</h3></el-divider>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <el-form-item label="1M" prop="tt1">
            <el-input v-model="formData.tt1" placeholder="疼痛1M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3M" prop="tt3">
            <el-input v-model="formData.tt3" placeholder="疼痛3M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="6M" prop="tt6">
            <el-input v-model="formData.tt6" placeholder="疼痛6M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="12M" prop="tt12">
            <el-input v-model="formData.tt12" placeholder="疼痛12M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="18M" prop="tt18">
            <el-input v-model="formData.tt18" placeholder="疼痛18M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="24M" prop="tt24">
            <el-input v-model="formData.tt24" placeholder="疼痛24M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="30M" prop="tt30">
            <el-input v-model="formData.tt30" placeholder="疼痛30M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="36M" prop="tt36">
            <el-input v-model="formData.tt36" placeholder="疼痛36M"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider><h3>下尿路症状</h3></el-divider>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <el-form-item label="1M" prop="xnlzz1">
            <el-input v-model="formData.xnlzz1" placeholder="下尿路症状1M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3M" prop="xnlzz3">
            <el-input v-model="formData.xnlzz3" placeholder="下尿路症状3M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="6M" prop="xnlzz6">
            <el-input v-model="formData.xnlzz6" placeholder="下尿路症状6M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="12M" prop="xnlzz12">
            <el-input v-model="formData.xnlzz12" placeholder="下尿路症状12M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="18M" prop="xnlzz18">
            <el-input v-model="formData.xnlzz18" placeholder="下尿路症状18M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="24M" prop="xnlzz24">
            <el-input v-model="formData.xnlzz24" placeholder="下尿路症状24M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="30M" prop="xnlzz30">
            <el-input v-model="formData.xnlzz30" placeholder="下尿路症状30M"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="36M" prop="xnlzz36">
            <el-input v-model="formData.xnlzz36" placeholder="下尿路症状36M"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import {
  PatientQlxcajgjzxrsldsApi,
  PatientQlxcajgjzxrslds
} from '@/api/business/patientqlxcajgjzxrslds'

/** 前列腺Ca激光局灶消融术/冷冻术 表单 */
defineOptions({name: 'PatientQlxcajgjzxrsldsForm'})

const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  patientId: undefined,
  patientName: undefined,
  doctorId: undefined,
  doctorName: undefined,
  psa1: undefined,
  psa3: undefined,
  psa6: undefined,
  psa12: undefined,
  psa18: undefined,
  psa24: undefined,
  psa30: undefined,
  psa36: undefined,
  mri1: undefined,
  mri3: undefined,
  mri6: undefined,
  mri12: undefined,
  mri18: undefined,
  mri24: undefined,
  mri30: undefined,
  mri36: undefined,
  cx1: undefined,
  cx3: undefined,
  cx6: undefined,
  cx12: undefined,
  cx18: undefined,
  cx24: undefined,
  cx30: undefined,
  cx36: undefined,
  nk1: undefined,
  nk3: undefined,
  nk6: undefined,
  nk12: undefined,
  nk18: undefined,
  nk24: undefined,
  nk30: undefined,
  nk36: undefined,
  xgn1: undefined,
  xgn3: undefined,
  xgn6: undefined,
  xgn12: undefined,
  xgn18: undefined,
  xgn24: undefined,
  xgn30: undefined,
  xgn36: undefined,
  bleeding1: undefined,
  bleeding3: undefined,
  bleeding6: undefined,
  bleeding12: undefined,
  bleeding18: undefined,
  bleeding24: undefined,
  bleeding30: undefined,
  bleeding36: undefined,
  tt1: undefined,
  tt3: undefined,
  tt6: undefined,
  tt12: undefined,
  tt18: undefined,
  tt24: undefined,
  tt30: undefined,
  tt36: undefined,
  xnlzz1: undefined,
  xnlzz3: undefined,
  xnlzz6: undefined,
  xnlzz12: undefined,
  xnlzz18: undefined,
  xnlzz24: undefined,
  xnlzz30: undefined,
  xnlzz36: undefined,
})
const formRules = reactive({
  patientId: [{required: true, message: '就诊人ID不能为空', trigger: 'blur'}],
  patientName: [{required: true, message: '就诊人姓名（冗余）不能为空', trigger: 'blur'}],
  doctorId: [{required: true, message: '录入医生ID不能为空', trigger: 'blur'}],
  doctorName: [{required: true, message: '录入医生姓名（冗余）不能为空', trigger: 'blur'}],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()

  formData.value.patientId = route.query.id
  formData.value.patientName = route.query.name
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await PatientQlxcajgjzxrsldsApi.getPatientQlxcajgjzxrslds(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as PatientQlxcajgjzxrslds
    if (formType.value === 'create') {
      await PatientQlxcajgjzxrsldsApi.createPatientQlxcajgjzxrslds(data)
      message.success(t('common.createSuccess'))
    } else {
      await PatientQlxcajgjzxrsldsApi.updatePatientQlxcajgjzxrslds(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    patientId: undefined,
    patientName: undefined,
    doctorId: undefined,
    doctorName: undefined,
    psa1: undefined,
    psa3: undefined,
    psa6: undefined,
    psa12: undefined,
    psa18: undefined,
    psa24: undefined,
    psa30: undefined,
    psa36: undefined,
    mri1: undefined,
    mri3: undefined,
    mri6: undefined,
    mri12: undefined,
    mri18: undefined,
    mri24: undefined,
    mri30: undefined,
    mri36: undefined,
    cx1: undefined,
    cx3: undefined,
    cx6: undefined,
    cx12: undefined,
    cx18: undefined,
    cx24: undefined,
    cx30: undefined,
    cx36: undefined,
    nk1: undefined,
    nk3: undefined,
    nk6: undefined,
    nk12: undefined,
    nk18: undefined,
    nk24: undefined,
    nk30: undefined,
    nk36: undefined,
    xgn1: undefined,
    xgn3: undefined,
    xgn6: undefined,
    xgn12: undefined,
    xgn18: undefined,
    xgn24: undefined,
    xgn30: undefined,
    xgn36: undefined,
    bleeding1: undefined,
    bleeding3: undefined,
    bleeding6: undefined,
    bleeding12: undefined,
    bleeding18: undefined,
    bleeding24: undefined,
    bleeding30: undefined,
    bleeding36: undefined,
    tt1: undefined,
    tt3: undefined,
    tt6: undefined,
    tt12: undefined,
    tt18: undefined,
    tt24: undefined,
    tt30: undefined,
    tt36: undefined,
    xnlzz1: undefined,
    xnlzz3: undefined,
    xnlzz6: undefined,
    xnlzz12: undefined,
    xnlzz18: undefined,
    xnlzz24: undefined,
    xnlzz30: undefined,
    xnlzz36: undefined,
  }
  formRef.value?.resetFields()
}
const route = useRoute() // 路由
const router = useRouter() // 路由

/** 初始化 **/
onMounted(() => {
  // 如果就诊人 ID 不存在，显示错误提示并关闭页面
  if (!route.query.id) {
    message.error('就诊人 ID 不存在，无法查看就诊记录')
    // 关闭当前路由，返回到就诊人列表页面
    router.push({name: 'UserPatient'})
    return
  }
})
</script>
